import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Table,
  Card,
  Button,
  Divider,
  PageHeader,
  Row,
  Col,
  Form,
  Input,
  Select,
  Badge,
} from 'antd';
import 'antd/dist/antd.css';
const columns = [
  {
    title: '渠道编号',
    dataIndex: 'channelId',
    key: 'channelId',
  },
  {
    title: '渠道名称',
    dataIndex: 'channelName',
    key: 'channelName',
  },
  {
    title: '渠道码类型',
    dataIndex: 'channelType',
    key: 'channelType',
    align: 'center',
    render: (text, record) => {
      console.log('status:' + text);
      return text == '1' ? <span><font color="black">固码</font></span> : <span><font color="blue">金额码</font></span>;
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    render: (text, record) => {
      if (text == '1') {
        return (
          <Fragment>
            <Badge status={'success'} text={'运行中'} />
          </Fragment>
        );
      } else {
        return (
          <Fragment>
            <Badge status={'default'} text='关闭' />
          </Fragment>
        );
      }
    },
  },
  {
    title: '操作',
    dataIndex: 'Op',
    key: 'Op',
    align: 'center',
    render: (text, record) => {
      return (
        <Fragment>
          <a >编辑</a>
          <Divider type="vertical" />
          <a >配置</a>
        </Fragment>
      );
    },
  },
];

const routes = [
  {
    path: 'index',
    breadcrumbName: '首页',
  },
  {
    path: 'first',
    breadcrumbName: '渠道管理',
  },
];
@Form.create()
class AddChannelPage extends React.PureComponent {
  state = {
    dataSource: [],
    current: 1,
    page: 0,
  };

  // componentDidMount() {
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'channel/fetchChannel',
  //     payload: {
  //       page: 0
  //     }
  //   });
  // }
  //组件卸载，用于没存回收
  componentWillUnmount() {

  }
  //  //组件将要被重新渲染
  //  shouldComponentUpdate(){

  //  }


  //  getSnapshotBeforeUpdate(){

  //  }
  //组件要被重新渲染
  componentDidUpdate() {

  }

  componentDidCatch() {

  }

  forceUpdate() {

  }
  //组件要接收到新属性
  componentWillReceiveProps() {

  }

  //渲染
  render() {
    return (
      <PageHeader title="渠道列表" breadcrumb={{ routes }} style={{textAlign:'left'}} >
        <div className={styles.tableList}>
          <Card bordered={false}>
            <div className={styles.tableListForm}>
              <Form layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={8} sm={24}>
                    <Form.Item label="渠道名称">
                      <Input placeholder="请输入" />
                    </Form.Item>
                  </Col>
                  <Col md={8} sm={12}>
                    <Form.Item label="状态">
                      <Select placeholder="请选择" style={{ width: '100%' }}>
                        <Select value="0">关闭</Select>
                        <Select value="1">运行中</Select>
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col md={3} sm={12}>
                    <Button type="primary">
                      查询
                  </Button>
                  </Col>
                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col md={1} sm={12}>
                    <Button icon="plus" type="primary">
                      新建
                    </Button>
                  </Col>
                </Row>
              </Form>
            </div>
            <div className={styles.tableListOperator}>
            </div>
          </Card>
        </div>
        <Card  bordered={false} style={{ marginTop: 24 }}>
          <Table dataSource={this.props.channel.dataSource.list} columns={columns} pagination={{
            pageSize: this.props.channel.dataSource.pageSize - 9,
            total: this.props.channel.dataSource.totalCount,
            current: this.state.current,
            onChange: this.changePage,
          }} />
        </Card>
      </PageHeader >

    );
  }

  changePage = (page) => {
    console.log("执行了么:" + page);
    this.setState({
      current: page,
    });
    const { dispatch } = this.props;
    console.log("state:" + this.state.current);
    dispatch({
      type: 'channel/fetchChannel',
      payload: {
        page: this.state.current
      }
    });
    this.forceUpdate();
  }
}

//字面意思就是，把models的state变成组件的props
function mapStateToProps(state) {
  console.log(state);
  return { channel: state.channel } // test就是models命名空间名字;
}
export default connect(mapStateToProps)(ChannelPage)   
